<!-- 重写了价格维护相关页面，暂时不使用，使用经销商Saas中相同页面，此页面作为借鉴，待最终确认废弃时再删除 -->
<template>
  <div>
    <!-- 基础信息 -->
    <div class="product-info">
      <h1>{{ productInfo.productName }}</h1>
      <div>
        <span>{{ productInfo.productCode }}</span>
        <span>{{ productInfo.category }}</span>
        <span>{{ productInfo.certificateNo }}</span>
        <span>{{ productInfo.productSpec }}</span>
      </div>
    </div>
    <!-- 搜索模块 -->
    <SearchForm
      label-width="70px"
      :data="productItemSearchForm"
      @searchForm="searchForm"
      @resetForm="resetForm"
      @focuskey="focusKey"
      @remoteMethod="remoteMethod"
      :submit-loading='submitLoading'
    />
    <!-- 表格模块 -->
    <el-editable
      ref="productTable"
      v-loading="tableLoading"
      :data="configDetail"
      height="400"
      :custom-attr="$TABLE_HEAD['distributorSass.toExamine.consignment']"
      :columns="productItemColumns"
    >
      <template
        slot="default-price"
        slot-scope="scope">
        <el-input
          style="width: 100px;"
          v-if="priceEditStatus[scope.row.id]"
          v-model="scope.row.price"
        />
        <span v-else>{{ scope.row.price }}</span>
        <el-button
          size="small"
          type="text"
          v-if="priceEditStatus[scope.row.id]"
          :loading="priceSubmitLoading[scope.row.id]"
          @click="submitPriceChange(scope.row)"
        >确定</el-button>
        <el-button
          v-else
          size="small"
          type="text"
          @click="editPrice(scope.row)"
        >编辑</el-button>
      </template>
      <template
        slot="default-promotionPrice"
        slot-scope="scope"
      >
        <el-input
          style="width: 100px;"
          v-if="promotionEditStatus[scope.row.id]"
          v-model="scope.row.promotionPrice"
        />
        <span v-else>{{ scope.row.promotionPrice }}</span>
        <el-button
          size="small"
          type="text"
          v-if="promotionEditStatus[scope.row.id]"
          :loading="promotionSubmitLoading[scope.row.id]"
          @click="submitPromotionChange(scope.row)"
        >确定</el-button>
        <el-button
          v-else
          size="small"
          type="text"
          @click="editPromotion(scope.row)"
        >编辑</el-button>
      </template>
      <template
        slot="default-action"
        slot-scope="scope">
        <el-button
          size="small"
          @click.stop="handlePriceDialogShow(scope.row)"
          type="text text-primary">历史记录</el-button>
      </template>
    </el-editable>
    <price-history-dialog
      :dialog-visible="priceDialogShow"
      @confirmDialog="priceDialogShow=false"
      @closeDialog="priceDialogShow=false"
    />
  </div>
</template>
<script>
import ElEditable from '@components/el-editable/index.vue'
import SearchForm from '@components/businesscomponents/search'
import PriceHistoryDialog from '@/moduleComponents/beforeSettle/distributorSide/basicInfoManagement/priceHistoryDialog'
import { productItemSearchForm, productItemColumns } from './const'
export default {
  components: {
    ElEditable, SearchForm, PriceHistoryDialog
  },
  data () {
    return {
      productItemSearchForm,
      productItemColumns,
      tableLoading: false,
      productInfo: {},
      configDetail: [],
      searchQuery: {},
      priceEditStatus: {}, // 寄售数量编辑状态
      priceSubmitLoading: {}, // 寄售数量提交时按钮loading
      promotionEditStatus: {}, // 最小寄售数量编辑状态
      promotionSubmitLoading: {}, // 最小寄售数量提交时按钮Loading
      priceDialogShow: false,
      submitLoading: false
    }
  },
  watch: {
    'configDetail.length' () {
      this.configDetail.map(item => {
        this.$set(this.priceEditStatus, item.id, false)
        this.$set(this.priceSubmitLoading, item.id, false)
        this.$set(this.promotionEditStatus, item.id, false)
        this.$set(this.promotionSubmitLoading, item.id, false)
      })
    }
  },
  mounted () {
    this.getProductInfo()
    this.getConfigDetail()
  },
  methods: {
    getProductInfo () {
      this.productInfo = {
        productName: '脊椎固定系统',
        productCode: 'KH21218323',
        category: '心脏XXXX',
        certificateNo: '国械注准21059343432',
        productSpec: 'XXXXXXXXXXXX'
      }
    },
    getConfigDetail () {
      this.submitLoading = true
      this.configDetail = [
        {
          id: '1111',
          hospitalName: '南京第一人民医院',
          time: '2019-09-08',
          price: 100,
          promotionPrice: null
        },
        {
          id: '1112',
          hospitalName: '南京第二人民医院',
          time: '2019-09-08',
          price: 50,
          promotionPrice: 100
        }
      ]
      this.submitLoading = false
    },
    searchForm (condition) {
      this.curPage = 1
      this.searchQuery = condition
      this.getConfigDetail()
    },
    resetForm (condition) {
      this.curPage = 1
      this.searchQuery = condition
      this.getConfigDetail()
    },
    focusKey () {},
    remoteMethod () {},
    editPrice (row) {
      this.$set(this.priceEditStatus, row.id, !this.priceEditStatus[row.id])
    },
    submitPriceChange (row) {
      // 提交数据 变更loading状态
      console.log(row)
      this.$set(this.priceEditStatus, row.id, !this.priceEditStatus[row.id])
    },
    editPromotion (row) {
      this.$set(this.promotionEditStatus, row.id, !this.promotionEditStatus[row.id])
    },
    submitPromotionChange (row) {
      console.log(row)
      this.$set(this.promotionEditStatus, row.id, !this.promotionEditStatus[row.id])
    },
    getPriceHistory (id) {
      // 获取价格历史数据
      console.log(id)
    },
    handlePriceDialogShow (row) {
      // 获取价格记录，弹窗展示
      this.getPriceHistory(row.id)
      this.priceDialogShow = true
    }
  }
}
</script>
